<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父子组件传值(Bus/总线/发布订阅模式/观察者模式)</title>
  <script src="vue.js"></script>
</head>
<body>
<!--子组件如要改变父组件传的值  需要data：function(){}, 将  -->
<div id="root">
    <child content="dell"></child>
    <child content="lee"></child>
</div>
<script>
  Vue.prototype.bus=new Vue()
  Vue.component('child',{
    data:function(){
      return{
          selfContent:this.content
      }
    },
    props:{
         content:String
    },
    template:'<div @click="handelClick">{{selfContent}}</div>',
    methods:{
      handelClick:function(){
//          alert(this.content)
          this.bus.$emit('change',this.selfContent)
      }
    },
    mounted:function(){
         var this_=this
         this.bus.$on('change',function(msg){
             this_.selfContent=msg
         })
    }
  })
  var vm=new Vue({
    el:"#root"
  })
</script>
</body>
</html>
